<template>
    <div>
        <h1>Input 输入框</h1>
        <p>常用的输入框操作</p>
        <div>
            <h2>基础用法</h2>
            <p>使用 v-model 绑定输入的值</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value1" placeholder="测试"></mo-input>
                    </div>
                    <p>{{value1}}</p>
                </div>
                <div class="code-box" v-show="button1">
                    <pre v-highlight><code class="html">{{ code1 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button1=!button1">
                        {{button1?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>禁用状态</h2>
            <p>使用 disabled 属性来控制输入框是否为禁用状态。 该属性接受一个 Boolean 类型的值。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value2" placeholder="测试" disabled></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button2">
                    <pre v-highlight><code class="html">{{ code2 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button2=!button2">
                        {{button2?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>一键清空</h2>
            <p>使用 clearable 属性即可得到一个可一键清空的输入框</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value3" placeholder="测试" clearable></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button3">
                    <pre v-highlight><code class="html">{{ code3 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button3=!button3">
                        {{button3?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>密码输入框</h2>
            <p>使用 show-pwd 属性即可得到一个可切换显示隐藏的密码框</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                       <mo-input v-model="value4" placeholder="测试" type="password" clearable showPassword></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button4">
                    <pre v-highlight><code class="html">{{ code4 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button4=!button4">
                        {{button4?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

         <div>
            <h2>文本域输入框</h2>
            <p>通过 type 属性设置 textarea 即可变为多行的文本域输入框，高度可通过 rows 属性控制。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value5" placeholder="测试" type="textarea"></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button5">
                    <pre v-highlight><code class="html">{{ code5 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button5=!button5">
                        {{button5?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>自适应文本域</h2>
            <p>设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value6" placeholder="测试" type="textarea" autosize></mo-input>
                    </div>
                    <div class="flex-start" style="margin-top:10px">
                        <mo-input v-model="value6" placeholder="测试" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button6">
                    <pre v-highlight><code class="html">{{ code6 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button6=!button6">
                        {{button6?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

         <div>
            <h2>尺寸</h2>
            <p>使用 size 属性改变输入框大小。 除了默认大小 medium 外，还有另外两个选项： large, small。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value7" placeholder="测试" size="small"></mo-input>
                        <mo-input v-model="value7" placeholder="测试" style="margin-left:10px"></mo-input>
                        <mo-input v-model="value7" placeholder="测试" size="large" style="margin-left:10px"></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button7">
                    <pre v-highlight><code class="html">{{ code7 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button7=!button7">
                        {{button7?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>输入长度限制</h2>
            <p>使用 maxlength 属性, 来控制输入内容的最大字数和最小字数。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value8" placeholder="测试" maxlength="5"></mo-input>
                    </div>
                    <div class="flex-start" style="margin-top:10px">
                        <mo-input v-model="value9" placeholder="测试" type="textarea" maxlength="10"></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button8">
                    <pre v-highlight><code class="html">{{ code8 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button8=!button8">
                        {{button8?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>圆角输入框</h2>
            <p>使用 round 属性, 来定义输入框为圆角样式。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value10" placeholder="测试" round></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button9">
                    <pre v-highlight><code class="html">{{ code9 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button9=!button9">
                        {{button9?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>带图标的输入框</h2>
            <p>要在输入框中添加图标，你可以简单地使用 prefixIcon 和 suffixIcon 属性。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-input v-model="value11" placeholder="测试" prefixIcon="user"></mo-input>
                    </div>
                    <div class="flex-start" style="margin-top:10px">
                        <mo-input v-model="value11" placeholder="测试" suffixIcon="user" clearable></mo-input>
                    </div>
                </div>
                <div class="code-box" v-show="button10">
                    <pre v-highlight><code class="html">{{ code10 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button10=!button10">
                        {{button10?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>属性</h2>
             <el-table 
                :data="attrList" 
                style="width: 800px"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
                    <el-table-column property="attr" label="属性"/>
                    <el-table-column property="desc" label="描述" />
                    <el-table-column property="type" label="类型"/>
                    <el-table-column property="opt" label="可选值" />
                    <el-table-column property="default" label="默认值"/>
             </el-table>
        </div>

         <div>
            <h2>事件</h2>
             <el-table 
                :data="eventList" 
                style="width: 800px"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
                    <el-table-column property="event" label="事件名"/>
                    <el-table-column property="desc" label="描述" />
                    <el-table-column property="temp" label="参数"/>
             </el-table>
        </div>
       
    </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue';
import code from '@/views/component/input/code';
import attrs from '@/views/component/input/attrs';
export default {
    name: 'input',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        let data = reactive({
            button1:false,
            button2:false,
            button3:false,
            button4:false,
            button5:false,
            button6:false,
            button7:false,
            button8:false,
            button9:false,
            button10:false,

            value1:'',
            value2:'',
            value3:'',
            value4:'',
            value5:'',
            value6:'',
            value7:'',
            value8:'',
            value9:'',
            value10:'',
            value11:''
        });
        
        return {
            ...code,
            ...toRefs(data),
            ...attrs
        };
    }
};

</script>
<style lang='scss' scoped>

</style>
